<template>
  <div class="page-container">
    
    <!-- 它是定位 -->
    <el-row class="about-company">
      <!-- <div  class="startSelect">
        <h5 class="state-name">关联公司</h5>
      </div> -->
      <el-select v-model="params.enterpriseId" placeholder="请选择公司" class="companySelect" filterable clearable size="small" @change="companyChange">
        <el-option v-for="item in companyOption" :key="item.id" :label="item.name" :value="item.id"/>
      </el-select>
    </el-row>
    <el-row style="flex-wrap: wrap;">
      <el-row justify="start" style="margin-right: 20px;margin-bottom: 10px;min-width: 581px;">
        <div class="startCell">
          <h5 class="state-name">我的事项</h5>
        </div>
        <el-radio-group v-model="params.userType" size="small" :disabled="params.below != 0" @change="userTypeChange">
          <el-radio-button v-for="item in userTypeList" :key="item.value" :label="item.value">{{ item.label }}</el-radio-button>
        </el-radio-group>
      </el-row>
      <el-row justify="start" style="margin-right: 20px;margin-bottom: 10px;min-width: 581px;">
        <div class="startCell">
          <h5 class="state-name">下属事项</h5>
        </div>
        <el-button size="small" :type="params.below ? 'primary' : ''" @click="belowChange" style="margin-top: 2px;">查看下属事项</el-button>
      </el-row>
      <el-row justify="start" style="margin-right: 20px;margin-bottom: 10px;min-width: 581px;">
        <div class="startCell">
          <h5 class="state-name">重要程度</h5>
        </div>
        <el-radio-group v-model="params.importantState" size="small" @change="importantStateChange">
          <el-radio-button
              v-for="item in importanceList"
              :key="item.value"
              :label="item.value"
          >
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </el-row>
      <el-row justify="start" style="margin-right: 20px;margin-bottom: 10px;min-width: 581px;">
        <div class="startCell">
          <h5 class="state-name">事项分类</h5>
        </div>
        <el-radio-group v-model="params.type" size="small" @change="stateChange">
          <el-radio-button
              v-for="item in matterTypeList"
              :key="item.value"
              :label="item.value"
          >
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </el-row>
      <el-row justify="start" style="margin-right: 20px;margin-bottom: 10px;min-width: 581px;">
        <div class="startCell">
          <h5 class="state-name">完成状态</h5>
        </div>
        <el-radio-group v-model="params.completionState" size="small" @change="completionStateChange">
          <el-radio-button
              v-for="item in completionStateList"
              :key="item.value"
              :label="item.value"
          >
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </el-row>
      <el-row justify="start" style="margin-right: 20px;margin-bottom: 10px;min-width: 581px;">
        <div class="startCell">
          <h5 class="state-name">关联类型</h5>
        </div>
        <el-radio-group v-model="params.relevanceType" size="small" @change="relevanceStateChange">
          <el-radio-button
              v-for="item in relevanceList"
              :key="item.value"
              :label="item.value"
          >
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </el-row>
    </el-row>
    <el-row style="margin-right: 0;" justify="end">
      <!-- 这是定位 -->
      <el-button size="small" type="warning" plain @click="openDraft" class="draft-btn">草稿箱</el-button>
    </el-row>

    <div class="table-box">
      <!-- 待初筛、初筛通过显示的表格 -->
      <el-table :data="tableList" size="small" class="tableList" :default-sort="{ prop: 'date', order: 'ascending' }" border max-height="700px" style="width: 100%;">
        <!--        ascending descending-->
        <el-table-column prop="state" width="90px">
          <template #header>
            <!-- 可筛选表头 -->
            <el-popover placement="bottom" :width="60" trigger="hover">
              <template #reference>
                <el-icon :size="15" color="var(--el-color-primary)">
                  <ele-Filter/>
                </el-icon>
              </template>
              <el-scrollbar max-height="600px">
                <el-radio-group v-model="params.state" size="small" v-if="filterData.state && filterData.state.length > 0" @change="getList">
                  <el-radio v-for="radio in filterData.state" :key="radio.name" :label="radio.value">
                    {{ radio.name }}
                    <!-- @click.prevent="onRadioChange(radio.value,'state')" -->
                  </el-radio>
                </el-radio-group>
                <el-empty style="padding: 0;font-size:12px;" v-else :image-size="50" description="无数据"/>
              </el-scrollbar>
            </el-popover>
            <span style="margin-right:2px;">状态</span>
          </template>
          <template v-slot="scope">
            <span>{{ scope.row.state }}</span>
          </template>
        </el-table-column>
        <el-table-column width="140px" prop="date" sortable>
          <template #header>
            <!-- 可筛选表头 -->
            <el-popover placement="bottom" :width="60" trigger="hover">
              <template #reference>
                <el-icon :size="15" color="var(--el-color-primary)">
                  <ele-Filter/>
                </el-icon>
              </template>
              <el-scrollbar max-height="600px">
                <el-radio-group v-model="params.sortType" size="small" v-if="filterData.orderByDate && filterData.orderByDate.length > 0" @change="getList">
                  <el-radio v-for="radio in filterData.orderByDate" :key="radio.name" :label="radio.value">
                    {{ radio.name }}
                    <!-- @click.prevent="params.sortType = radio.value" -->
                    <!-- 此处不进行查询-->
                  </el-radio>
                </el-radio-group>
                <el-empty style="padding: 0;font-size:12px;" v-else :image-size="50" description="无数据"/>
              </el-scrollbar>
            </el-popover>
            <span style="margin-right:2px;">{{ filterData.orderByDate[params.sortType].name }}</span>
          </template>
          <template v-slot="scope">
            <span>{{
                params.sortType === 0 ? scope.row.updateTime :
                    params.sortType === 1 ? scope.row.createTime :
                        params.sortType === 2 ? scope.row.actionStartTime : scope.row.actionEndTime
              }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="主题和内容" width="300px"/>
        <el-table-column label="发起人" min-width="150px">
          <template #header>
            <!-- 可搜索表头 -->
            <el-popover placement="bottom" :width="100" trigger="click">
              <template #reference>
                <el-icon :size="15" color="var(--el-color-primary)">
                  <ele-Search/>
                </el-icon>
              </template>
              <el-input placeholder="请输入发起人" v-model.trim="params.sponsorName" size="small" clearable @keydown.prevent.enter="getList"/>
            </el-popover>
            <span style="margin-right:2px;">发起人</span>
          </template>
          <template v-slot="scope">
            <span>{{ scope.row.sponsor?.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="执行人" min-width="150px">
          <template #header>
            <!-- 可搜索表头 -->
            <el-popover placement="bottom" :width="100" trigger="click">
              <template #reference>
                <el-icon :size="15" color="var(--el-color-primary)">
                  <ele-Search/>
                </el-icon>
              </template>
              <el-input placeholder="请输入执行人" v-model.trim="params.executorName" size="small" clearable @keydown.prevent.enter="getList"/>
            </el-popover>
            <span style="margin-right:2px;">执行人</span>
          </template>
          <template v-slot="scope">
            <span>{{ getExecutorsUserName(scope.row.executors) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审批人" min-width="150px">
          <template #header>
            <!-- 可搜索表头 -->
            <el-popover placement="bottom" :width="100" trigger="click">
              <template #reference>
                <el-icon :size="15" color="var(--el-color-primary)">
                  <ele-Search/>
                </el-icon>
              </template>
              <el-input placeholder="请输入审批人" v-model.trim="params.approverName" size="small" clearable @keydown.prevent.enter="getList"/>
            </el-popover>
            <span style="margin-right:2px;">审批人</span>
          </template>
          <template v-slot="scope">
            <span>{{ scope.row.approvers[0]?.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="association" label="关联" width="120px"/>
        <el-table-column label="操作" width="160px" fixed="right">
          <template v-slot="scope">
            <el-button type="primary" :icon="Edit" text size="small" @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" :icon="Delete" text size="small" @click="remove(scope.row)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-block">
        <el-pagination
            v-model:currentPage="params.current"
            v-model:page-size="params.size"
            :page-sizes="[10, 20, 30, 40]"
            :small="true"
            :disabled="false"
            :background="false"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="getList"
        />
      </div>
    </div>

    <!-- 表单 -->
    <EventForm
        :dialogEventFormVisible="dialogEventFormVisible"
        :code="formCode"
        :item-id="itemId"
        :title="formTitle"
        :eventId="eventId"
    ></EventForm>

    <!-- 草稿箱 -->
    <el-dialog :append-to-body="true" width="850px" v-model="draftVisible" title="草稿箱">
      <el-table size="small" :data="draftList" border>
        <el-table-column prop="state" width="50px" label="状态"></el-table-column>
        <el-table-column prop="date" width="120px" label="创建日期"></el-table-column>
        <el-table-column prop="title" label="主题和内容"></el-table-column>
        <el-table-column width="90px" label="发起人">
          <!-- <template v-slot="scope">
            <span >{{ scope.row.sponsor?.userName }}</span>
          </template> -->
        </el-table-column>
        <el-table-column width="90px" label="执行人">
          <!-- <template v-slot="scope">
            <span >{{ getExecutorsUserName(scope.row.executors) }}</span>
          </template> -->
        </el-table-column>
        <el-table-column width="90px" label="审批人">
          <!-- <template v-slot="scope">
            <span >{{ scope.row.approvers[0]?.userName }}</span>
          </template> -->
        </el-table-column>
        <el-table-column prop="association" label="关联" width="120px"></el-table-column>
        <el-table-column label="操作" width="130px" fixed="right" align="center">
          <template v-slot="scope">
            <el-button type="primary" :icon="Edit" text size="small" @click="editDraft(scope.row)">编辑</el-button>
            <el-button type="danger" :icon="Delete" text size="small" @click="removeDraft(scope.row)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-block">
        <el-pagination
            v-model:currentPage="draftParams.current"
            :small="true"
            :disabled="false"
            :background="false"
            layout="total, prev, pager, next, jumper"
            :total="draftParams.total"
            :hide-on-single-page="true"
            @current-change="getDraft"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {ref, toRefs, provide, reactive, watch, onMounted} from 'vue'
import {ElMessage, ElMessageBox, ElLoading} from 'element-plus'
import {Check, CirclePlus, Delete, Edit, Search, Filter} from '@element-plus/icons-vue'
import EventForm from '../EventForm/index.vue'
import {currentForm} from '../lib/config.js'
import {useCalendarConfig} from '/@/stores/calendar'
import {storeToRefs} from 'pinia'

import {homeApi} from '/@/api/home'
import {getEnterprises} from '/@/api/sys/enterprise'

export default {
  name: 'List',
  components: {
    EventForm
  },
  props: {},
  // emits: ["exchangeDate", "closeMore"],
  setup(props, context) {
    const {events, list} = toRefs(props)
    const homeCalendar = homeApi()
    const storesCalendarConfig = useCalendarConfig()
    const {calendarConfig} = storeToRefs(storesCalendarConfig)
    const state = reactive({
      matterEditVisible: false,
      tableList: [],
      params: {
        current: 1,
        size: 10,
        executorName: '',        // 执行人名称
        executorId: '',       // 执行人ID
        sponsorName: '',       // 发起人名称
        sponsorId: '',         // 发起人ID
        approverName: '',       // 审批人名称
        approverId: '',       // 审批人ID
        userType: null,       // 私人状态
        type: -1,             //分类
        completionState: -1,   // 完成状态
        importantState: -1,    // 重要状态
        relevanceType: -1,    // 关联类型
        companyId: '',
        sort: 0,    // 排序方式, 0顺序 1倒序, 默认1
        sortType: 0,      // 排序的字段, 0更新时间 1发起时间 2开始时间 3结束时间, 默认0
        below: 0,     // 是否下属事项, 0否 1是
        state: -1
      },
      matterForm: {},
      userTypeList: [
        {
          label: '全部',
          value: null,
          select: false
        },
        {
          label: '我发起的审批',
          value: 0,
          select: false
        },
        {
          label: '我执行的',
          value: 1,
          select: false
        },
        {
          label: '需要我审批的',
          value: 2,
          select: false
        },
        {
          label: '抄送我的',
          value: 3,
          select: false
        }
        // {
        //   label: '我发起的任务单',
        //   value: 3,
        //   select: false
        // },
        // {
        //   label:"关于下属的",
        //   value: 5,
        //   select:false
        // },
      ],
      matterTypeList: [
        {
          label: '全部',
          value: -1,
          select: false
        },
        {
          label: '行动',
          value: 0,
          select: false
        },
        {
          label: '任务单',
          value: 1,
          select: false
        },
        {
          label: '报告',
          value: 2,
          select: false
        },
        {
          label: '方案',
          value: 3,
          select: false
        },
        {
          label: '钱',
          value: 4,
          select: false
        },
        {
          label: '公告',
          value: 5,
          select: false
        },
        {
          label: '交易',
          value: 6,
          select: false
        },
        {
          label: '记录',
          value: 7,
          select: false
        },
        {
          label: '人事',
          value: 8,
          select: false
        },
        {
          label: '目标',
          value: 9,
          select: false
        }
      ],
      importanceList: [
        {
          label: '全部',
          value: -1,
          select: false
        },
        {
          label: '重要的',
          value: 0,
          select: false
        },
        {
          label: '逾期未完成',
          value: 1,
          select: false
        },
        {
          label: '急需处理',
          value: 2,
          select: false
        },
        {
          label: '忽略',
          value: 3,
          select: false
        }
      ],
      completionStateList: [
        {
          label: '全部',
          value: -1,
          select: false
        },
        {
          label: '已完成',
          value: 0,
          select: false
        },
        {
          label: '进行中',
          value: 1,
          select: false
        },
        {
          label: '未开始',
          value: 2,
          select: false
        },
        {
          label: '待审批',
          value: 3,
          select: false
        },
        {
          label: '审批通过',
          value: 4,
          select: false
        },
        {
          label: '退回',
          value: 5,
          select: false
        },
        {
          label: '撤销',
          value: 6,
          select: false
        }
      ],
      relevanceList: [
        {
          label: '全部',
          value: -1,
          select: false
        },
        {
          label: '客户/供应商',
          value: 0,
          select: false
        },
        {
          label: '项目',
          value: 1,
          select: false
        },
        {
          label: '市场活动',
          value: 2,
          select: false
        }
      ],
      aboutStaff: [{
        label: '是',
        value: 1
      }, {
        label: '否',
        value: 0
      }],
      filterData: {
        state: [{name: '全部', value: -1}, {name: '状态0', value: 0}, {name: '状态1', value: 1}, {name: '状态2', value: 2}],
        orderByDate: [{name: '更新时间', value: 0}, {name: '发起时间', value: 1}, {name: '开始时间', value: 2}, {name: '结束时间', value: 3}]
      },

      total: 0,
      companyOption: [],
      dialogEventFormVisible: false,
      formCode: null,
      itemId: null,
      formTitle: null,
      // 当前存在的事项
      formExist: currentForm,
      eventId: null, // 编辑的id
      draftVisible: false, // 草稿箱
      draftList: [],
      draftParams: {
        current: 1,
        total: 0
      }
    })

    // 重置
    const reset = () => {
      state.params = {
        current: 1,
        size: 10,
        executorName: '',    //执行人名称
        executorId: '',      //执行人ID
        sponsorName: '',     //发起人名称
        sponsorId: '',       //发起人ID
        approverName: '',   //审批人名称
        approverId: '',     //审批人ID
        userType: null,     //私人状态
        type: -1,           //分类
        completionState: -1, //完成状态
        importantState: -1,  //重要状态
        relevanceType: -1,  //关联类型
        companyId: '',
        sort: 0,    // 排序方式, 0顺序 1倒序, 默认1
        sortType: 0,       // 排序的字段, 0更新时间 1发起时间 2开始时间 3结束时间, 默认0
        below: 0,        // 是否下属事项, 0否 1是
        state: -1
      }
    }
    // 事项分类
    const stateChange = (val) => {
      // if (state.params.type !== -1){
      //   const temp = state.params.type
      //   state.matterTypeList[temp].select = true
      //   setTimeout(() => {
      //     state.matterTypeList[temp].select = false
      //   },400)
      // }

      // if (state.params.type === val){
      //   state.params.type = -1
      // }else{
      //   state.params.type = val
      // }
      reset()
      getList()
    }
    // 完成状态
    const completionStateChange = (val) => {
      // if (state.params.completionState !== -1){
      //   const temp = state.params.completionState
      //   state.completionStateList[temp].select = true
      //   setTimeout(() => {
      //     state.completionStateList[temp].select = false
      //   },400)
      // }

      // if (state.params.completionState === val){
      //   state.params.completionState = -1
      // }else{
      //   state.params.completionState = val
      // }
      reset()
      getList()
    }
    // 重要程度
    const importantStateChange = (val) => {
      // if (state.params.importantState !== -1){
      //   const temp = state.params.importantState
      //   state.importanceList[temp].select = true
      //   setTimeout(() => {
      //     state.importanceList[temp].select = false
      //   },400)
      // }

      // if (state.params.importantState === val){
      //   state.params.importantState = -1
      // }else{
      //   state.params.importantState = val
      // }
      reset()
      getList()
    }
    // 关联类型
    const relevanceStateChange = (val) => {
      // if (state.params.relevanceType !== -1){
      //   const temp = state.params.relevanceType
      //   state.relevanceList[temp].select = true
      //   setTimeout(() => {
      //     state.relevanceList[temp].select = false
      //   },400)
      // }

      // if (state.params.relevanceType === val){
      //   state.params.relevanceType = -1
      // }else{
      //   state.params.relevanceType = val
      // }
      reset()
      getList()
    }
    // 我的事项
    const userTypeChange = (val) => {
      // if (state.params.userType !== -1){
      //   const temp = state.params.userType
      //   state.userTypeList[temp].select = true
      //   setTimeout(() => {
      //     state.userTypeList[temp].select = false
      //   },400)
      // }

      // if (state.params.userType === val){
      //   state.params.userType = null
      // }else{
      //   state.params.userType = val
      // }
      reset()
      getList()
    }
    // 编辑
    const edit = (row) => {
      state.eventId = row.id
      state.formCode = row.code
      state.formTitle = row.codeName
      const isExist = state.formExist.find(item => item == row.code)
      if (!isExist) {
        ElMessage.error(`${row.codeName}\n编辑操作不存在`)
        return
      }
      state.dialogEventFormVisible = !state.dialogEventFormVisible
    }
    const remove = (row) => {
      ElMessageBox.confirm('确定删除事项？', '删除提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        context.emit('delEvent', row)
      })
    }
    const openDraft = () => {
      state.draftVisible = !state.draftVisible
    }
    const onRadioChange = (val, name) => {
      // 重复点击同个值取消选中
      state.params[name] = state.params[name] == val ? null : val
      state.params.current = 1
      getList()
    }
    const getExecutorsUserName = (data) => {
      let userNames = ''
      for (let i = 0; i < data.length; i++) {
        userNames += data[i].userName + '，'
      }
      return userNames.substring(0, userNames.length - 1)
    }
    const submit = (row) => {

    }
    // 获取数据
    const getList = () => {
      const loading = ElLoading.service({
        lock: true,
        text: '获取中',
        background: 'transparent'
      })
      homeCalendar.getMatterPage(state.params).then(res => {
        const data = res.data
        state.total = data.total
        state.tableList = data.records
        loading.close()
      }).catch(e => {
        console.log(e)
        loading.close()
      })
    }
    const handleSizeChange = (size) => {
      state.params.size = size
      state.params.current = 1
      getList()
    }
    // 切换是否查看下属事项
    const belowChange = () => {
      state.params.below = state.params.below ? 0 : 1
      if (state.params.below) {
        state.params.userType = null
      }
      state.params.current = 1
      getList()
    }
    // 切换查询公司
    const companyChange = (enterpriseId) => {
      state.params.current = 1
      getList()
    }
    // 编辑草稿
    const editDraft = row => {
      state.eventId = row.id
      state.formCode = row.code
      state.formTitle = row.codeName
      const isExist = state.formExist.find(item => item == row.code)
      if (!isExist) {
        ElMessage.error(`${row.codeName}\n编辑操作不存在`)
        return
      }
      state.dialogEventFormVisible = !state.dialogEventFormVisible
    }
    // 移除草稿
    const removeDraft = row => {
      ElMessageBox.confirm('确定删除这条草稿？', '删除提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getDraft()
      })
    }
    // 获取草稿
    const getDraft = () => {

    }
    watch(() => calendarConfig.value,
        (val) => {
          console.log(val && val.view)
          if ((val && val.view) == 'list') {
            getList()
            getEnterprises().then(res => state.companyOption = res.data).catch(e => console.log(e))
          }
        }
    )
    onMounted(() => {
      if (calendarConfig.value.view == 'list') {
        // 默认视图为列表页，则进入就加载
        getList()
      }
    })
    return {
      Filter,
      Search,
      Check,
      CirclePlus,
      Delete,
      Edit,
      ...toRefs(state),
      getList,
      // closeMore,
      // exchangeDate,
      stateChange,
      completionStateChange,
      importantStateChange,
      relevanceStateChange,
      userTypeChange,
      edit,
      remove,
      openDraft,
      onRadioChange,
      getExecutorsUserName,
      submit,
      handleSizeChange,
      belowChange,
      companyChange,
      editDraft,
      removeDraft,
      getDraft
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  padding: 1px;
  height: 95.5%;
  overflow-y: auto;

  .checkbox {
    border-radius: 25px;
  }

  .stateCell {
    position: relative;
    padding: 6px 4px;
    cursor: pointer;
    flex: auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    .state-num {
      padding-bottom: 2px;
      color: var(--el-text-color-regular);
      font-size: 18px;
    }

    .state-name {
      font-weight: normal;
      font-size: 12px;
      color: var(--el-text-color-primary);
      line-height: unset;
    }

    &:hover {
      .state-num, .state-name {
        color: var(--el-color-primary);
      }
    }
  }

  .startSelect {
    position: relative;
    padding: 6px 4px;
    // flex: 1;
    text-align: left;
    width: 60px;

    .state-name {
      font-weight: normal;
      font-size: 12px;
      color: var(--el-text-color-regular);
    }
  }

  .companySelect {
    flex: 4.5;

    :deep(.el-input__wrapper) {
      // border-top-right-radius: 25px;
      // border-bottom-right-radius: 25px;
      margin-top: 2px;
    }
  }

  .startCell {
    position: relative;
    padding: 6px 4px;
    // flex: auto;
    width: 60px;
    text-align: left;
    // margin-right: 10px;
    .state-name {
      font-weight: normal;
      font-size: 12px;
      // color: rgb(255, 255, 255);
      color: var(--el-text-color-regular);
    }
  }

  .state-close {
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 0%;
      margin: 0 auto;
      border-bottom: 3px solid var(--el-color-primary);
      animation-name: borderBottomClose;
      animation-duration: 400ms;
      animation-timing-function: ease-out;
    }

    @keyframes borderBottomClose {
      0% {
        width: 52%;
      }
      25% {
        width: 39%;
      }
      50% {
        width: 26%;
      }
      75% {
        width: 13%;
      }
      100% {
        width: 0%;
      }
    }
  }

  .state-active {
    .state-num, .state-name {
      font-weight: bold;
      color: var(--el-color-primary);
    }

    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 65%;
      margin: 0 auto;
      border-bottom: 3px solid var(--el-color-primary);
      animation-name: borderBottomOpen;
      animation-duration: 400ms;
      animation-timing-function: ease-out;
    }
  }

  @keyframes borderBottomOpen {
    0% {
      width: 13%;
    }
    25% {
      width: 26%;
    }
    50% {
      width: 39%;
    }
    75% {
      width: 52%;
    }
    100% {
      width: 65%;
    }
  }

  .tableList {
    // border: 1px solid var(--el-table-border-color);
    border-bottom: none;

    :deep(thead .cell) {
      display: flex;
      align-items: center;
    }

    :deep(thead .el-icon) {
      margin-top: -2px;
      cursor: pointer;
    }

    .primary {
      cursor: pointer;
      color: var(--el-color-primary);
    }
  }

  .table-box {
    background: #fff;

    :deep(.el-table__header-wrapper .el-table__cell) {
      background: var(--el-color-primary-light-9);
      color: var(--next-bg-menuBar-light-1);
    }
  }

  :deep(el-input__wrapper) {
    padding: 0;
  }

  :deep(.el-input-number .el-input__inner) {
    text-align: left !important;
  }

  .header-row {
    span:hover {
      color: var(--el-color-primary);
    }
  }

  .draft-btn {
    position: fixed;
    top: 8px;
    right: 230px;
  }

  .about-company {
    position: absolute;
    top: 6px;
    left: 0;
  }
}
</style>
